import MainContent from "./components/MainContent/MainContent";
import Headings from "./components/Headings/Headings";
import { useState } from "react";
import type HeadingType from "./types";
import "./index.scss";
const TableOfContents = () => {
  const [headings, setHeadings] = useState<HeadingType[]>([]);
  const [activeId, setActiveId] = useState("");

  function handleHeadings(headings: HeadingType[]) {
    setHeadings(headings);
  }

 

  return (
    <div className="table-of-contents">
      <div className="container">
        <MainContent sendDataToParent={handleHeadings} updateActiveId={setActiveId}/>
        <Headings activeId={activeId} headings={headings}/>
      </div>
    </div>
  );
};

export default TableOfContents;
